<style type="text/css">
table
{
border-collapse:collapse;
}

.month{
border : 1px solid black;
max-width : 559px;
text-align : center;
}

.day{
font-size : 11px;
margin-right : 2px;
border : 1px solid grey;
cursor : pointer;
width : 20px;
height : 20px;
text-align : center;
margin : 0;
background: url('<?php echo $data['baseurl']; ?>global/img/globalbo/appartements/day.jpg') repeat-x;
}

.day:hover{
background-color : lightgrey;
}

.free{
  background: green;
}

.occ{
background: #e70000;
}

#appart-fixed{
width : 102px;
position : relative;
top : 42px;
margin : 0;
padding : 0;
border : 0;
}

.appart-line{
font-size : 11px;
border : 1px solid grey;
height : 20px;
text-align : center;
margin : 0;
padding-left : 5px;
padding-right : 5px;
}

.fleft{
}

.calendar {
margin-right : 5px;
}

.appart{
text-align: center;
border : 1px solid grey;
background: url('<?php echo $data['baseurl']; ?>global/img/globalbo/appartements/day.jpg') repeat-x;
}

</style>
<?php include Doo::conf()->SITE_PATH .  Doo::conf()->PROTECTED_FOLDER . "viewc//menu.php"; ?>
<div id='planning-header'>
  <div><b style='padding-left : 10px; font-size : 16px;'>Planning</b> </div>
  
  <!-- <img id='component-printer' src='<?php echo $data['baseurl']; ?>global/img/globalbo/appartements/printer.png' alt='Imprimer' title='Imprimer'> -->
  <label for='month-select'>Sélectionnez un mois : </label><select name='month' id='month-select' style='width : 110px;'>
    <option value='1'>Janvier</option>
    <option value='2'>Février</option>
    <option value='3'>Mars</option>
    <option value='4'>Avril</option>
    <option value='5'>Mai</option>
    <option value='6'>Juin</option>
    <option value='7'>Juillet</option>
    <option value='8'>Août</option>
    <option value='9'>Septembre</option>
    <option value='10'>Octobre</option>
    <option value='11'>Novembre</option>
    <option value='12'>Décembre</option>
  </select>
  <label for='year-select'>Année : </label><select name='year' id='year-select' style='width : 70px;'>
    <option value='2012'>2012</option>
    <option value='2013'>2013</option>
    <option value='2014'>2014</option>
    <option value='2015'>2015</option>
    <option value='2016'>2016</option>
    <option value='2017'>2017</option>
    <option value='2018'>2018</option>
    <option value='2019'>2019</option>
    <option value='2020'>2020</option>
    <option value='2021'>2021</option>
    <option value='2022'>2022</option>
    <option value='2023'>2023</option>
    <option value='2024'>2024</option>
    <option value='2025'>2025</option>
    <option value='2026'>2026</option>
    <option value='2027'>2027</option>
    <option value='2028'>2028</option>
    <option value='2029'>2029</option>
    <option value='2030'>2030</option>
  </select>
  <label for='immeuble'>Immeuble : </label>
  <select id='immeuble' name='immeuble' style='width : 210px;'>
    <?php foreach($data['immeubles'] as $k1=>$v1): ?>
      <option value="<?php echo $v1->imm_id; ?>"><?php echo $v1->imm_nom; ?></option>
    <?php endforeach; ?>
  </select>  
  
</div>

<div id='main-site-globalbo-moduleSpace-flat'>
  
  <div id='component-planning' class='fleft calendar'>
    <?php echo $data['planning']; ?>
  </div>
</div>



<script type="text/javascript">

<?php foreach($data['reserv'] as $k1=>$v1): ?>
  <?php echo displayApp($v1, $k1); ?>
<?php endforeach; ?>
  
var filterPlanning = function (){
  $("#planning-table").fadeOut("slow");
  var data = "month="+$('#month-select').val()+"&year="+$('#year-select').val()+"&immeuble="+$('#immeuble').val();
  url="<?php echo $data['baseurl']; ?>admin/frbFlat/frbFlat_MainController/planning";
  $.ajax({
    urlApp: url,
    type: 'POST',
    cache: false,
    data: data,
    success: function(html){
      //alert(html);
      $("#component-planning").html(html);
    }
  });    
}
$(document).ready(function(){
  $('#month-select option').each(function(){
    if($(this).val() == "<?php echo $data['cur_month']; ?>"){
      $(this).attr("selected", "selected");
    }
  });
  $('#year-select option').each(function(){
    if($(this).val() == "<?php echo $data['cur_year']; ?>"){
      $(this).attr("selected", "selected");
    }
  });
  $('#month-select').change(filterPlanning);
  $('#year-select').change(filterPlanning);
  $('#immeuble').change(filterPlanning);

  $("#component-printer").click(function(){
    window.print();
  });
});
  
</script>
